<template>
  <div class='recentlyPlayed'>
    <van-nav-bar
      title="歌单"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </van-nav-bar>
    <van-tabs
      v-model="active"
      title-active-color="#E0674A"
    >
      <!-- 最近播放的音乐 -->
      <van-tab>
        <template #title>
          歌曲 <span class="listCount">{{ songCount }}</span>
        </template>
        <recently-played-song
          class="tabListView"
          @songCount="songCount = $event"
          @storagesList="list = $event"
        />
      </van-tab>
      <!-- /最近播放的音乐 -->

      <!-- 最近播放的歌单 -->
      <van-tab>
        <template #title>
          歌单 <span class="listCount">{{ songListCount }}</span>
        </template>
        <recently-played-song-list
          class="tabListView"
          @songListCount="songListCount = $event"
        />
      </van-tab>
      <!-- /最近播放的歌单 -->

      <!-- 最近播放的歌单 -->
      <van-tab>
        <template #title>
          DJ <span class="listCount">{{ DjCount }}</span>
        </template>
        <recently-played-dj
          class="tabListView"
          @DjCount="DjCount = $event"
        />
      </van-tab>
      <!-- /最近播放的歌单 -->
    </van-tabs>

    <audio-component
      @storagePlayingSongList="storagePlayingSongList"
      @showPopup="isShowPopup = true"
    />
    <van-popup
      v-model="isShowPopup"
      closeable
      close-icon="arrow-down"
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <played-view
        @storagePlayingSongList="storagePlayingSongList"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { NavBar, Tab, Tabs, Popup } from 'vant'
import recentlyPlayedSong from './components/recentlyPlayedSong'
import recentlyPlayedSongList from './components/recentlyPlayedSongList'
import recentlyPlayedDj from './components/recentlyPlayedDj'
import audioComponent from '@/components/songComponent/audioComponent'
import playedView from '@/components/playedView'

export default {
  name: 'recentlyPlayed',
  components: {
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Popup.name]: Popup,
    recentlyPlayedSong,
    recentlyPlayedSongList,
    recentlyPlayedDj,
    audioComponent,
    playedView
  },
  props: {},
  data () {
    return {
      active: 0, // 默认打开的标签页
      songCount: 0, // 最近播放的歌曲数量
      songListCount: '',
      DjCount: '',
      isShowPopup: false,
      list: []
    }
  },
  computed: {
    ...mapState(['palyedSongObj', 'palyedSongIndex', 'audio'])
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    storagePlayingSongList () {
      this.$store.commit('setPlayingSongList', this.list)
      this.$store.commit('setPlayStatus', true)
    }
  }
}
</script>
<style lang='less' scoped>
@import "../../styles/common.less";
.recentlyPlayed {
  /deep/ .van-nav-bar__arrow, /deep/ .van-nav-bar__text {
    color: #383838;
  }
  .van-cell {
    background-color: #F5F5F5;
    padding: 0;
  }
  /deep/ .van-tabs__wrap {
    height: unset;
    .van-tabs__nav--line {
      padding-bottom: 0px;
      .van-tab--active {
        height: 34px;
      }
      .van-tabs__line {
        bottom: 0px;
        background-color: @themeColor;
      }
    }
  }
  .listCount {
    font-size: 10px;
  }
  .tabListView {
    position: fixed;
    overflow-y: auto;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 70px;
  }
}
</style>
